<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>详情</title>
    <link rel="stylesheet" href="/static/index/layui/css/layui.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900">
    <style>
        *{padding:0;margin:0;}
        a{text-decoration: none;color: #0C0C0C;}
        html{font-size:14px;}
        body{background-color:white;min-width: 650px;display: flex; flex-flow: column nowrap;}
        .header{
            display: flex;
            justify-content: space-around;
            /*width: 99%;*/
            height:6rem;
            /*border: 1px solid #1a23ff;*/
            align-items: center;
        }
        .header > div:first-of-type{
            width: 10%;
            height:4rem;
            /*border: 1px solid #2417ff;*/
            margin-left: 6rem;
        }
        .header > div:nth-of-type(2){
            width: 50%;
            height:4rem;
            /*border: 1px solid #2417ff;*/
            display: flex;
            justify-content: space-evenly;
            font-size: 1.4rem;
            align-items: center;
        }
        .header > div:first-of-type >a:first-of-type >img{
            width: 30px;
            height: 42px;
        }
        .header > div:first-of-type >a:nth-of-type(2) >span{
            font-size: 1.6rem;
            font-weight: bold;
        }
        .active{
            color:#FC7059;
        }
        .banner{
            height: 700px;
            background-color: #f8f8f8;
            /*border: 1px solid #ff2235;*/
        }
        .banner > a > img{
            width: 100%;
            height: 100%;
        }
        .main{
            /*height: 1000px;*/
            /*border: 1px solid #ff2235;*/
            background-color: #f8f8f8;
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            min-height: 800px;
            /*justify-content: center;*/
        }
        .main-nav{
            margin: 1.5rem 0;
            width: 60%;
            height: 20px;
            /*border: 1px solid #2a23ff;*/
            display: flex;
            justify-content: flex-start;
            /*margin-left: 20rem;*/
            align-items: center;
        }
        .main-nav > a{
            margin-left: 0.5rem;
            font-size: 0.9rem;
        }
        .main-nav > a:first-of-type > img{
            width: 80%;
            height: 90%;
        }
        .main-list{
            min-height: 600px;
            width: 60%;
            border: 1px solid #F3F3F3;
            background-color: white;
            /*display: flex;*/

        }
        .main-list-title{
            width: 100%;
            height:5%;
            /*border: 1px solid #f36617;*/
            display: flex;
            align-items: center;
            margin-top: 4rem;
        }
        .main-list-title > span:first-of-type{
            width: 4px;
            height: 30px;
            background: #FF7159;
            margin-left: 0.5rem;
        }
        .main-list-title > span:nth-of-type(2){
            /*width: 48px;*/
            /*height: 22px;*/
            font-size: 24px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #333333;
            line-height: 56px;
            margin-left: 2rem;
        }
        .main-list-content{
            width: 99%;
            min-height: 85%;
            margin-left: 0.6rem;
            /*border: 1px solid #f31712;*/
            display: flex;
            /*flex-flow: row wrap;*/
        }
        .main-list-left {
            width: 20%;
            height: 100%;
            border: 1px solid #f8f8f8;
        }
        .main-list-left > a >img{
            width: 100%;
            height: 100%;
        }
        .main-list-right{
            width: 80%;
            height: 100%;
            border: 1px solid #f8f8f8;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-around;
        }
        .main-list-right-content{
            width: 13rem;
            height: 9rem;
            /*border: 1px solid orangered;*/
            margin-bottom: 3rem;
        }
        .main-list-right-content > a > img{
            width: 100%;
            height: 100%;
            border-radius: 0.2rem;
        }
        .main-list-right-content > div{
            display: flex;
            justify-content: space-between;
            margin-top: 0.5rem;
        }
        .main-list-right-content > div > a{
            font-size: 0.9rem;
            color: #000000;
            font-family: Microsoft YaHei;
        }
        footer{
            min-height:35vh;
            border: 1px solid #CECECE;
        }
        .footer{
            width: 80%;
            margin: 5rem auto;
            /*border: 1px solid #ce0f16;*/
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-around;
        }
        .footer > div:first-of-type > span,.footer > div:nth-of-type(3) > span{
            font-weight: bold;
        }
        .footer > div:nth-of-type(2) > a,.footer > div:nth-of-type(4) > a{
            display: flex;
            flex-flow: column nowrap;
            /*justify-content: space-around;*/
            margin-bottom: 1.2rem;
            color: #B8B8B8;
        }
        .footer > div:nth-of-type(5),.footer > div:nth-of-type(6),.footer > div:nth-of-type(7){
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: center;
            font-weight: bold;
        }
        .footer > div:nth-of-type(5)>a:first-of-type,.footer > div:nth-of-type(6)>a:first-of-type,.footer > div:nth-of-type(7)>a:first-of-type{
            width: 7rem;
            height: 7rem;
            margin-bottom: 0.5rem;
        }
        .footer > div:nth-of-type(5)>a:first-of-type>img,.footer > div:nth-of-type(6)>a:first-of-type>img,.footer > div:nth-of-type(7)>a:first-of-type>img{
            width: 100%;
            height: 100%;
        }
        .footer > div:nth-of-type(8),.footer > div:nth-of-type(9),.footer > div:nth-of-type(10){
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
        }
        .footer-footer{
            width: 40rem;
            /*border: 1px solid #ce0f16;*/
            margin: 0 auto;
            color: #9F9F9F;
            font-size: 0.8rem;
        }
    </style>
</head>
<body>
<div class="header">
    <div>
        <a href=""><img src="{$setting.index_logo}" alt=""></a>
        <a href=""><span>七星优购</span></a>
    </div>
    <div>
        {volist name="indexMenu" id="vo"}
        <a href="{$vo.url}">
            <span {if $vo.url eq $url} class="active" {else/} {/if}>{$vo.name}</span>
        </a>
        {/volist}
    </div>
</div>

<div class="banner">
    {volist name="indexMenu" id="vo"}
    {if $vo.url eq $url}
    <a href=""><img src="{$vo.img}" alt=""></a>
    {/if}
    {/volist}
</div>

<div class="main">
    <div class="main-nav">
        <a href=""><img src="/static/index/image/icon-1@2x.png" alt=""></a>
        <a href=""><span>首页</span></a>
        <a href=""><span> > </span></a>
        <a href=""><span> {if empty($findCate.cate_name)}全部{else/}{$findCate.cate_name}{/if} </span></a>
    </div>
    {volist name="cate_list" id="vo"}
    <div class="main-list">

        <div class="main-list-title">
            <span></span>
            <span>{$vo.cate_name}</span>
        </div>

        <div class="main-list-content">
            <div class="main-list-left">
                <a href=""><img src="/static/index/image/banner-list.png" alt=""></a>
            </div>

            <div class="main-list-right">

                {volist name="$vo.goods_list" id="voo"}
                <div class="main-list-right-content">
                    <a href=""><img src="{$voo.image}" alt=""></a>
                    <div>
                        <a href="">{$voo.name}</a>
                        <a href="">￥ {$voo.price}/{$voo.unit}</a>
                    </div>
                </div>
                {/volist}



            </div>
        </div>

    </div>
    {/volist}

</div>
<footer>
    <div class="footer">

        <div>
            <span>关于七星优购</span>
        </div>

        <div>
            {volist name="setting.about" id="vo"}
            <a href="javascript:;">{$vo}</a>
            {/volist}
        </div>

        <div>
            <span>关于我们</span>
        </div>

        <div>
            {volist name="setting.about_we" id="vo"}
            <a href="">{$vo}</a>
            {/volist}
        </div>


        <div>
            <a href=""><img src="{$setting.wxgzh}" alt=""></a>
            <a href="">微信公众号</a>
        </div>

        <div>
            <a href=""><img src="{$setting.app}" alt=""></a>
            <a href="">安卓版APP下载</a>
        </div>

        <div>
            <a href=""><img src="{$setting.wxxcx}" alt=""></a>
            <a href="">小程序下载</a>
        </div>

        <div><a href=""><img src="{$setting.wb}" alt=""></a></div>
        <div><a href=""><img src="{$setting.qq}" alt=""></a></div>
        <div><a href=""><img src="{$setting.wx}" alt=""></a></div>
    </div>
    <div class="footer-footer">
        <span>{$setting.name} </span>
    </div>
</footer>
</body>
</html>